<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Crocodile Hunter: {{name}} </title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css" />

    <link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}" />

  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
      <div class='container'>
          <a class="navbar-brand" href="{{ url_for('index')}}">Crocodile Hunter</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          <div id="navbarResponsive" class="collapse navbar-collapse">
          <ul class='navbar-nav mr-auto'>
            <li class='nav-item dropdown'>
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="themes" aria-expanded="false">Tools <span class="caret"></span></a>
              <div class="dropdown-menu" aria-labelledby="themes">
                <a class="dropdown-item" href="{{ url_for('checkall') }}">Recalc suspiciousness</a>
                <a class="dropdown-item" href="{{ url_for('list_known_towers') }}">Add known tower</a>
                <a class="dropdown-item" href="{{ url_for('get_logs') }}">Logs</a>
              </div>
            </li>
            <li class='nav-item'>
              <a class="nav-link" href="{{ url_for('cell_sightings')}}">Cells</a>
            </li>
            <li class='nav-item'>
              <a class="nav-link" href="{{ url_for('index')}}">Enodebs</a>
            </li>
            <li class='nav-item'>
              <a class="nav-link" href="{{ url_for('map')}}">Combined</a>
            </li>
          </ul>
          <span class="navbar-brand text-muted text-right">Project: {{name}}</span>
          </div>
      </div>
    </nav>
    <div class="container mt-1">
      {% block container %}{% endblock %}
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaSz9Z1-Gx8qwbCF7krj76K4l7msf-eHA&callback=initMap" async defer></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
  {% block scripts %}{% endblock %}
  <script>
    $(document).ready(function() {
      $('.data-table').DataTable({
        'paging': false,
        'searching': false,
      });

      $('.data-table-select').DataTable({
        dom: 'Bfrtip',
        paging: false,
        searching: false,
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
          'selectAll',
          {
            text: 'Reclassify',
            action: function(){
              var rowData = this.table().rows( {selected: true} ).ids().toArray();
              console.log(rowData)
              var form;
              form = $('<form />', {
                  action: '/reclassify-towers',
                  method: 'post',
                  style: 'display: none;'
              });
              $('<input />', {
                  type: 'hidden',
                  name: 'ids',
                  value: JSON.stringify(rowData)
              }).appendTo(form);
              $('<input />', {
                  type: 'hidden',
                  name: 'classification',
                  value: $('#new-class').val()
              }).appendTo(form);
              form.appendTo('body').submit();
            }
          },
        ],
        order: [[ 1, 'asc' ]]
      });
    } );
  </script>
  </body>
</html>
